<template>
	
  <div class="footer_coin" >
    <div class="header">
      <table class="tab01">
        <tr>
          <td class="td1">现货</td>
          <td class="td2">杠杆</td>
          <td class="td3">法币</td>
          <td style="width: 80%;text-align: right">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
          </svg>
          </td>
        </tr>
      </table>
      <table class="tab02">
        <tr>
          <td width="5%">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
            <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
          </svg>
          </td>
          <td width="20%">BTC/USDT</td>
          <td width="5%"><span>+0.74%</span></td>
          <td width="40%" style="text-align: right">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sliders2-vertical" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M0 10.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1H3V1.5a.5.5 0 0 0-1 0V10H.5a.5.5 0 0 0-.5.5ZM2.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5Zm3-6.5A.5.5 0 0 0 6 6h1.5v8.5a.5.5 0 0 0 1 0V6H10a.5.5 0 0 0 0-1H6a.5.5 0 0 0-.5.5ZM8 1a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2A.5.5 0 0 0 8 1Zm3 9.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1H14V1.5a.5.5 0 0 0-1 0V10h-1.5a.5.5 0 0 0-.5.5Zm2.5 1.5a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5Z"/>
          </svg>
          </td>
          <td>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
            <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
          </svg>
          </td>
        </tr>
      </table>
    </div>
    <div class="mid">
      <!-- 输入框-->
      <div class="mid_top">
        <input placeholder="K线图" />
      </div>
      <!-- 四个板块-->
      <div class="mid_block" id="mid_first">
        <div class="mid_first_01">
          <div id="sp1" @click="buy(BuyOrSellButton)">买入</div>
          <div id="sp2" @click="sell(BuyOrSellButton)">卖出</div>
        </div>
        <div class="mid_first_02">
          <select v-model="selectedOption">
            <option value="1">限价委托</option>
          </select>
          <div class="div_input02">
            <input class="input02" type="text" placeholder="" v-model="inputValue" />
          </div>
          <div class="div_but01">
            <button @click="decreaseValue">
		      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/>
              </svg>
            </button>
            <button @click="increaseValue">
			  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
			    <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
			  </svg>
			</button><br />
          </div>
          <span style="color: slategrey; font-size: medium">=193530.4CNY</span>
        </div>
      </div>
    </div>
  </div>
  <div class="div_input02">
    <input class="input02" v-model="orderQuantity" placeholder="委托数量(BTC)" />
  </div>
  <div class="div_but01">
    <button @click="decreaseQuantity">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/>
      </svg>
    </button>
    <button @click="increaseQuantity">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
      </svg>
    </button>
  </div>

  <table>
    <tr>
      <td width="77%">可用</td>
      <td style="text-align: right">{{ availableAmount }} 	0.211496USTD</td>
    </tr>
    <tr>
      <td>已有</td>
      <td style="text-align: right">{{ existingAmount }} 0.000000BTC</td>
    </tr>
  </table>
  <input class="input02" v-model="transactionAmount" placeholder="交易额" />
  <span>= {{ transactionInCNY }} CNY</span><br />
  <select v-model="selectedOption" style="border: 0; background: transparent; width: 50%; outline: none; margin-top: 10px">
    <option value="advanced">高级选项</option>
    <option value="other">其他</option>
  </select><br />
  <button @click="buyOrSell" class="buy_button">现货买入</button>
  <table>
    <tr>
      <td width="50%">锁定</td>
      <td style="text-align: right">{{ lockedAmount }} USDT</td>
    </tr>
  </table>

  <div class="mid_block" id="mid_second">
    <div class="mid_second_01">
      <!-- 表格标题 -->
      <table class="mid_second_01_tab01">
        <tr>
          <td style="text-align: left">价格</td>
          <td style="text-align: right">累计</td>
          <td>
			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
			    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
			    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
			</svg>
		  </td>
        </tr>
      </table>

      <!-- Green section (上涨) -->
      <div class="green">
        <table class="mid_second_01_tab02" style="color: slategray;">
          <tr>
            <td style="font-size: small;" width="10%">7</td>
            <td style="font-size: small;" width="40%">27650.3</td>
            <td width="50%" style="text-align: right;font-size: small;">0.7943</td>
          </tr>
        </table>
      </div>

      <!-- Red section (下跌) -->
      <div class="red">
        <table class="mid_second_01_tab02" style="color: red">
          <tr>
            <td style="font-size: small;" width="10%">7</td>
            <td style="font-size: small;" width="40%">27650.3</td>
            <td width="50%" style="text-align: right;font-size: small;">0.7943</td>
          </tr>
        </table>
      </div>

      <!-- 下拉选择框 -->
      <div class="mid_second_01_select">
        <select v-model="selectedOption">
          <option >0.1</option>
        </select>
      </div>

      <!-- 多空形式 -->
      <div style="text-align: left; color: slategrey; font-size: smaller; margin-top: 10px">
        <span>多空形式</span>
      </div>

      <!-- 可选的额外内容 -->
      <div class="xingshi"></div>
    </div>
  </div>

  <div class="footer">
    <div class="footer_01">
      <table>
        <!-- 第一行：标题 -->
        <tr class="tr01">
          <td style="color: black">当前委托</td>
          <td>最新成交</td>
          <td>行情图表</td>
          <td>数据分析</td>
          <td style="text-align: right;width: 20%">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock-history" viewBox="0 0 16 16">
              <path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"/>
              <path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"/>
              <path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/>
            </svg>
          </td>
        </tr>

        <!-- 第二行：下拉菜单和按钮 -->
        <tr class="tr02">
          <td colspan="2">
            <select v-model="orderType">
              <option>普通委托</option>
              <option>限价委托</option>
            </select>
          </td>
          <td colspan="2">仅当前市场</td>
          <td width="25%">
            <input type="button" value="全部撤销" @click="cancelAllOrders" />
          </td>
        </tr>

        <!-- 第三行：价格、时间、成交量 -->
        <tr class="tr03">
          <td colspan="2" style="font-size: small">
            价格
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-down" viewBox="0 0 16 16">
              <path d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/>
            </svg>
          </td>
          <td colspan="2" style="font-size: small;">
            时间
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-down" viewBox="0 0 16 16">
              <path d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/>
            </svg>
          </td>
          <td style="font-size: small;text-align: right">
            成交量
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-down" viewBox="0 0 16 16">
              <path d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/>
            </svg>
          </td>
        </tr>
      </table>
    </div>
  </div>
  
  
</template>

<script>
export default {
  data() {
    return {
      data: {}, // 获取服务器返回的数据
      rate: 7.22, // RMB 对美元的汇率
    };
  },
  mounted() {
    // 生命周期函数，类似于 ngOnInit
  },
  methods: {
    // 币币交易界面点击买入触发事件
    buy(button) {
      // 获取当前币价并显示在输入框
      // let price = this.data.price;
      // 根据币价计算出对应RMB价格
      // 页面数据展示
      // 修改现货买入或者现货卖出button 对应的文字以及样式
      console.info("CoinsComponent {buy()}: ", "xxxxxx");
    },

    // 币币交易界面点击卖出触发事件
    sell(button) {
      // 获取当前币价并显示在输入框
      // 根据币价计算出对应RMB价格
      // 页面数据展示
      // 修改现货买入或者现货卖出button 对应的文字以及样式
      console.info("CoinsComponent {sell()}: ", "zzzzzz");
    }
  }
};
</script>

<style scoped>
.footer_coin{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 98%;

  margin-top: -80px;
}

.header {
  width: 98%;
  margin-top: 10%;

  margin-top: -40px;
}
.header{
  width: 98%;
  margin-top: 20px;

}

.header table {
  margin: auto;
  text-align: center;
}

.header .tab01 {
  width: 480px;
}

.header .tab01 .td1 {}

.header .tab01 .td2 {
  color: slategrey;
  font-size: small;
}

.header .tab01 .td3 {
  color: slategrey;
  font-size: small;
}

.header img {
  width: 20px;
  height: 20px;
}

.header .tab02 {
  width: 98%;
}

.header .tab02 span {
  background-color: indianred;
  opacity: 0.4;
  color: darkred;
  font-size: small;
}

/* 中间部分 */
.mid {
  width: 98%;
  box-shadow: 0px 10px 0px 0px #F6F6F6;
}

/* 中间输入框 */
.mid_top {
  text-align: center;
  margin-top: 8px;
}

.mid_top input {
  width: 96%;
  height: 20px;
  background-color: #F7F7F7;
  border-radius: 5px;
  border: #F8F9FB;
}

/* 中间2个涨跌模块 */
.mid .mid_block {
  width: 50%;
  margin-top: 10px;
}

#mid_first {
  float: left;
}

.mid_block .mid_first_01 {
  text-align: center;
}

.mid_block .mid_first_01 div {
  width: 50%;
  height: 26px;
  text-align: center;
  line-height: 26px;
  border-radius: 2px;
  color: slategrey;
  font-size: small;
  box-shadow: 0px 0px 0px 0.5px;
}

.mid_block .mid_first_01 #sp1 {
  display: inline-block;
  background-color: #E93C3E;
  color: #F9FAFC;
}

.mid_block .mid_first_01 #sp2 {
  display: inline-block;
}

.mid_block .mid_first_02 select {
  width: 98%;
}

.mid_block .mid_first_02 input {
  margin-top: 10px;
  width: 95%;
}

.mid_block .mid_first_02 .div_but01 button {
  border: 0;
  outline: none;
  background-color: transparent;
}

.mid_block .mid_first_02 img {
  width: 10px;
  height: 10px;
}

.mid_block .mid_first_02 .input02 {
  height: 25px;
  background-color: #F7F7F7;
  border: 0;
  border-radius: 2px;
}

.mid_block .mid_first_02 .div_but01 {
  margin-top: -27px;
  margin-left: 180px;
  border: none;
  outline: none;
}

.mid_block .mid_first_02 table {
  margin-top: 10px;
}

.mid_block .mid_first_02 td {
  font-size: x-small;
}

.mid_block .mid_first_02 span {
  color: slategrey;
  font-size: xx-small;
}

.buy_button {
  margin-top: 20px;
  background-color: #E93C3E;
  opacity: 0.8;
  border-radius: 2px;
  text-align: center;
  width: 98%;
  height: 25px;
  color: #F9FAFC;
  border: 0;
}

/* 第二个模块 */
#mid_second {
  text-align: center;
  float: left;
}

.mid_second_01 table {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
}

.mid_second_01_tab01 td {
  width: 50%;
  font-size: xx-small;
}

.mid_second_01_tab02 {
  font-size: xx-small;
  color: cyan;
}

.green {
  background-color: #ECF8F8;
  height: 150px;
}

.red {
  background-color: #FEECEA;
  height: 150px;
}

.mid_second_01_select {
  display: inline-block;
  width: 100%;
  height: 30px;
  text-align: left;
  margin-top: 10px;
}

.mid_second_01_select select {
  padding-bottom: -10px;
  width: 70%;
  height: 20px;
  background-color: #F7F7F7;
  border: 0;
  border-radius: 10px;
}

.footer {
  width: 100%;
  height: 300px;
  margin-top: 20px;
  height: 15%;
  margin-bottom: 0px;
}

.footer_01 table {
  width: 100%;
}

.footer_01 td {
  color: lightslategray;
  font-size: small;
}

.footer_01 .tr02 {
  height: 30px;
  text-align: center;
}

.footer_01 .tr02 select {
  width: 90%;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background-color: #F7F7F7;
  font-size: x-small;
}

.footer_01 .tr03 {
  height: 30px;
  margin-top: 10px;
}

.xingshi {
  width: 500px;
  height: 30px;
  background-color: #FEECEA;
  float: right;
  margin-right: 70px;
  margin-bottom: 15px;
  border-radius: 20px;
  color: #B45D66;
}

.pic4 {
  width: 200px;
  height: 18px;
  margin-left: 8px;
  margin-top: 8px;
}

.pic4 {
	width: 200px;
	height: 18px;
	margin-left: 8px;
	margin-top: 8px;
}	
</style>

